<template>
	<view>
		<view class="box">
			<view class="mybei"></view>
			<image class="mytu1" src="../../static/images/mytu1png.png"></image>
		<view class="mybiao1">
			<view class="mycheng">用户昵称</view>
			<view class="myhao">159123456753</view>
			<button class="mychong" @tap="chongzhi()">充值</button>
			<view class="myji">50</view>
			<view class="myjif">积分</view>
			<view class="myyu">50</view>
			<view class="myyue">余额</view>
			<view class="myshu"></view>
		</view>
		<view class="mybiao2"> 
		 <!-- <image class="myxiaotu"  src="../../static/images/myxiaotu.png"></image> -->
		 <!-- <view class="myhuiyuan">大板水会员</view>
         <view class="mytequan">点击查看特权</view>		 --> 
		 </view>
		 <view class="mybiaobei"></view>
		 <!-- 中部-->
		 <view class="myzhong">
			 <view class="myzhong-shang"> 
			  <view class="myzhong-left">我的订单</view>
			  <view class="myzhong-right">查看全部</view>
			  <view class=""></view>
			 </view>
			<!-- <view class="myzhongxia">
				 <view class="myfen">
					 <i class="iconfont dai">&#xe66d;</i>
					 <view class="fen">待分配</view>
				 </view>
				 <view class="mypei">
					  <i class="iconfont pei">&#xe618;</i>
					 <view class="song">配送中</view>
				 </view>
				 <view class="myping">
					 <i class="iconfont ping">&#xe600;</i>
					 <view class="jia">待评价</view>
				 </view>
				 <view class="mytui">
					 <i class="iconfont tui">&#xe624;</i>
					 <view class="kuan">退款货</view>
				 </view>	 
			 </view> -->
		<view class="zhong11">
			<navigator class="grace-boxes  pei11" @tap="allocated()">
			     <view class="grace-boxes-img">
			     <image src="../../static/iconfont/daifenpei.png" mode="widthFix" ></image>
			     </view>
			     <view class="grace-boxes-text" >待分配</view>
			</navigator> 
            <navigator class="grace-boxes  pei11" @tap="distribution()">
                 <view class="grace-boxes-img">
                 <image src="../../static/iconfont/peisong.png" mode="widthFix" ></image>
                 </view>
                 <view class="grace-boxes-text" >配送中</view>
            </navigator> 
			<navigator class="grace-boxes  pei11" @tap="pingjia()">
			     <view class="grace-boxes-img">
			     <image src="../../static/iconfont/daipingjia.png" mode="widthFix" ></image>
			     </view>
			     <view class="grace-boxes-text">待评价</view>
			</navigator>  
			<navigator class="grace-boxes  pei11">
			     <view class="grace-boxes-img">
			     <image src="../../static/iconfont/tuihuokuan.png" mode="widthFix" ></image>
			     </view>
			     <view class="grace-boxes-text">退款货款</view>
			</navigator>  
		</view>	 	 
			 
			  
		 </view>
	     <!-- 下部 height = 66-->
	     <view class="myxiaxia">
			 <view class="myxiashang">
				  <view class="myfuwu">我的服务</view>
			  </view>
		      <!-- <view class="myxiazhong">
				   <view class="myshui" @tap="gotoshuipiao()">
					  <image class="iconfonts"  src="../../static/iconfont/shuipiao.png"></image>
					  <view class="shui">水票</view>
				  </view>
				  <view class="mydi" @tap="goyodizhi()"> 
				       <image  class="icaddres" src="../../static/iconfont/dizhi.png"></image>
					   <view class="dizhi">地址</view>
				  </view>
				  <view class="myfan" @tap="gotofankui()">
					  <image  class="icfankui" src="../../static/iconfont/fankui.png"></image>
					  <view class="fankui">反馈</view>
				  </view>
				  <view class="myfapiao" @tap="gotofapiao()">
					  <image class="icfa" src="../../static/iconfont/fapiaso.png"></image>
					  <view class="fapiao">发票</view>
				  </view> 
			  </view> -->
			  
			  <view class="zhong11">
			  	<navigator class="grace-boxes  pei11"  @tap="gotoshuipiao()">
			  	     <view class="grace-boxes-img">
			  	     <image src="../../static/iconfont/shui.png" mode="widthFix" ></image>
			  	     </view>
			  	     <view class="grace-boxes-text">水票</view>
			  	</navigator> 
			    <navigator class="grace-boxes  pei11" @tap="goyodizhi()">
			          <view class="grace-boxes-img">
			          <image src="../../static/iconfont/dizhi.png" mode="widthFix" ></image>
			          </view>
			          <view class="grace-boxes-text">地址</view>
			     </navigator> 
				 <navigator class="grace-boxes  pei11" @tap="gotofankui()">
				      <view class="grace-boxes-img">
				      <image src="../../static/iconfont/fankui.png" mode="widthFix" ></image>
				      </view>
				      <view class="grace-boxes-text">反馈</view>
				 </navigator>  
				  <navigator class="grace-boxes  pei11" @tap="gotofapiao()">
				      <view class="grace-boxes-img">
				      <image src="../../static/iconfont/fapiao.png" mode="widthFix" ></image>
				      </view>
				      <view class="grace-boxes-text">发票</view>
				 </navigator>
				 
			  </view>	 	 
			  
			<!-- 底部-->
			  <view class="mydibu"> 
			   <!--  <view class="mydixiao" @tap="gotonews()">
					 <i class="iconfont xiao ">&#xe613;</i>
					 <view class="xiaoxi">消息</view>
				 </view> -->
				<!-- <navigator class="grace-boxes  pei11" @tap="gotonews()">
				      <view class="grace-boxes-img">
				      <image src="../../static/iconfont/xiao.png" mode="widthFix" ></image>
				      </view>
				      <view class="grace-boxes-text">消息</view>
				 </navigator> -->
				 
				 
			  </view> 	 
			  
			  
		  </view>
  	  
		</view>
		
	</view>
</template>

<script>
	
	export default{
		
		data(){
			
		},
		methods:{
			gotoshuipiao(){
				uni.navigateTo({
					url:"../../components/waterTicket/ticket"
				})
			},
			goyodizhi(){
				uni.navigateTo({
					url:'../../components/adress/adress'
				})
			},
			gotonews(){
				uni.navigateTo({
					url:'../../components/news/new'
				})
			},
			gotofapiao(){
				uni.navigateTo({
					url:'../../components/invoices/invoice'
				})
			},
			gotofankui(){
				uni.navigateTo({
					url:'../../components/feedbacks/feedback'
				})
			},
			chongzhi(){
				uni.navigateTo({
					url:'../../components/recharge/recharge'
				})
			},
			allocated(){
				uni.switchTab({
					url:'../order/order'
				})
			},
			distribution(){
				uni.navigateTo({
					url:'../order/peisongzhong'
				})
			},
			pingjia(){
				uni.navigateTo({
					url:'../order/daipingjia'
				})
			}
			
			
			
			
		}
		
		
		
		
		
		
	}
	
	
	
	
	
	
	
	
	
	
	
</script>

<style>
	.box{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.mybei{
		width: 100%;
		height: 214upx;
		background: #3B9CDB ;
	}
	.mybiao1{
		width:690upx;
		height: 274upx;
		background: #F9F9F9;
		border-radius: 12px;
		position: absolute;
		top: 56upx;
		left: 15px;
		z-index: 3;
	}
	.mytu1{
		width: 136upx;
		height: 136upx;
		position: absolute;
		top: 0upx;
		left: 64upx;
		z-index: 10;
	}
	.mycheng{
		position: absolute;
		top: 24upx;
		left: 194upx;
		font-weight: 700px;
	}
	.myhao{
		position: absolute;
		top: 78upx;
		left: 204upx;
		color: #999999 ;
		font-size: 24upx;
	}
	.mychong{
		width: 134upx;
		height: 56upx;
		font-size: 24upx;
		position: absolute;
		top: 60upx;
		right: 36upx;
		background: #3B9CDB ;
		color: #FFFFFF ;
		font-weight: 700;
		line-height: 56upx;
	}
	.myji{
		position: absolute;
		left: 99px;
		top: 76px;
		color: #6B6B6B;
		font-size: 13px;
		font-weight: 700;
	}
	.myjif{
		position: absolute;
		left: 192upx;
		top: 194upx;
		color: #B3B3B3 ;
		font-size: 13px;
	}
	.myyu{
		position: absolute;
		top: 152upx;
		right: 200upx;
		color: #6B6B6B;
		font-size: 13px;
		font-weight: 700;
	}
	.myyue{
		position: absolute;
		top: 194upx;
		right: 192upx;
		color: #B3B3B3 ;
		font-size: 13px;
	}
	.myshu{
		position: absolute;
		width: 2px;
		height: 36upx;
		top: 194upx;
		left: 256upx;
		background: #B3B3B3;
	}
	.mybiao2{
		width: 690upx;
		height: 100upx;
		background: #121212;
		position: absolute;
		top: 310upx;
		left:30upx;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}
	.myhuiyuan{
		position: absolute;
		top: 20upx;
		left: 76upx;
		color: #E3D7BF;
		font-size: 14px;
	}
	.myxiaotu{
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 22upx;
		left: 30upx;
	}
	.mytequan{
		position: absolute;
		top: 20upx;
		left: 308upx;
		color: #B8A77D;
		font-size: 11px;
		width: 134upx;
		height: 46upx;
		font-weight: 700;
	}
	.mybiaobei{
		width: 750upx;
		height: 240upx;
		background: #F2F2F2 ;
	}
	.myzhong{
		width: 750upx;
		height: 240upx;
	}
	.myzhong-shang{
		width: 750upx;
		height: 80upx;
		border-bottom: 1px solid #999999 ;
	}
	.myzhong-left{
		width: 114upx;
		height: 46upx;
		float: left;
		font-size: 12px;
		color: #101010;
		margin-left: 30upx;
		margin-top: 24upx;
		font-weight: 700;
	}
	.myzhong-right{
		width:114upx;
		height: 46upx;
		float: right;
		font-size: 12px;
		margin-top: 24upx;
		margin-right: 56upx;
		color: #B3B3B3;
	}
    .myzhongxia{
		width: 750upx;
		height: 160upx;	
		display: flex;
	}
    .dai{
		margin-top: 16upx;
		margin-left: 56upx;
	}
	.fen{
		color: #5C5C5C;
		font-size: 24upx;
		margin-left: 40upx;
	}
	.pei{
		margin-top: 16upx;
		margin-left: 148upx;
	}
	.song{
		color: #5C5C5C;
		font-size: 24upx;
		margin-left: 148upx;
	}
	.ping{
		margin-top: 16upx;
		margin-left: 152upx;
	}
	.jia{
		color: #5C5C5C;
		font-size: 24upx;
		margin-left: 152upx;
	}
	.tui{
		margin-top: 16upx;
		margin-left: 138upx;
	}
	.kuan{
		color: #5C5C5C;
		font-size: 24upx;
		margin-left: 138upx;
	}
	.myxiaxia{
		width: 750upx;
		margin-top: 14upx;
		margin-bottom: 16upx;
		height: 400upx;
	}
	.myxiashang{
		width: 750upx;
		height: 132upx;
		border-bottom: 1px solid #B3B3B3 ;
	}
	.myfuwu{
		height: 132upx;
		line-height: 132upx;
		font-weight: 700;
		font-size: 14px;
	}
	.myxiazhong{
		display: flex;
		width: 750upx;
		height: 132upx;
		border-bottom: 1px solid #B3B3B3 ;
	}
	.zhongshui{
		margin-top: 38upx;
		margin-left: 50upx;
	}
	.shui{
		font-size: 24upx;
		margin-left: 56upx;
		color: #5C5C5C ;
		text-align: center;
	}
	.zhongdi{

	}
	.dizhi{
		font-size: 24upx;
		color: #5C5C5C ;
		margin-left: 154upx;
		text-align: center;
	}
	.fan{
		margin-top: 38upx;
		margin-left: 142upx;
	}
	.fankui{
		font-size: 24upx;
		color: #5C5C5C ;
		margin-left: 152upx;
	}
	.fa{
		margin-top: 38upx;
		margin-left: 132upx;
	}
	.fapiao{
		font-size: 24upx;
		color: #5C5C5C ;
		margin-left: 152upx;
	}
	.mydibu{
		width: 750upx;
		height: 132upx;
		display: flex;
	}
	.xiao {
		margin-top: 36upx;
		margin-left: 60upx;
	}
	.xiaoxi{
		margin-left: 56upx;
		font-size: 24upx;
		color: #5C5C5C ;
	}
    .iconfonts{
		width: 30upx;
		height: 30upx;
		margin-top: 16upx;
		margin-left: 60upx;
	}
	.icaddres{
		width: 30upx;
		height: 30upx;
		margin-top: 16upx;
		margin-left: 160upx;
	}
	.icfankui{
		width: 30upx;
		height: 30upx;
		margin-top: 16upx;
		margin-left: 160upx;
	}
	.icfa{
		width: 30upx;
		height: 30upx;
	    margin-top: 16upx;
		margin-left: 160upx;
	}
	
	
	
	
	
	
	.zhong11{
		margin-top: 60upx;
	}
	.fen11{
		float: left;
	}
	.pei11{
		float: left;
	}
	
	.grace-boxes-img image{
		width:60upx; 
		height:60upx; 
		border-radius:8rpx;
		}
	
	
</style>
